<template>
	<view class="sciencePopular-article">
		<view class="article-box" v-for="data in pcData" :key="data.id" @click="goToArticleDetail(data.id)">
			<view class="box-img"><image :src="data.image"></image></view>
			<span class="box-title">{{data.title}}</span>
			<span class="box-author">{{data.author}}</span>
			<span class="box-date">{{data.date}}</span>
		</view>
	</view>
</template>

<script setup>
	import { reactive,ref,onMounted } from "vue";
	import { article } from '@/api/article';
	import { onLoad } from '@dcloudio/uni-app';
	
	const goToArticleDetail = (id) => {
		uni.navigateTo({
			url: `/pages/sciencePopular/articleDetail?id=${id}`
		});
	};
	const type = ref(0);
	onLoad((options) => {
		type.value = options.type || 0;
		fetchArticleList();
	});
	
	// 日期格式化函数
	const formatDate = (dateStr) => {
	  if (!dateStr) return "";
	  const date = new Date(dateStr);
	  return `${date.getFullYear()}年${String(date.getMonth() + 1).padStart(2, "0")}月${String(date.getDate()).padStart(2, "0")}日`;
	};
	
	// 获取文章列表
	const fetchArticleList = async () => {
		uni.showLoading({
		   title: '加载中...', // 提示文字
		   mask: true // 开启蒙层防止用户误操作
		 });
	  try {
	    const response = await article({ type: type.value });
	    if (response.code === "200") {
	       pcData.value = response.data.records.map(item => ({
	        id: item.id.toString(),
	        image: item.coverImg || '/static/science1.png', 
	        title: item.title,
	        author: "岭南罗氏妇科", 
	        date: formatDate(item.createTime)
	      }));
		  
		  uni.hideLoading({
		    success: (response) => {
		    },
		    complete: response => {
		    }
		  });
	    }
	  } catch (error) {
	    console.error("接口请求失败:", error);
	  }
	};
	
	// 组件挂载后调用接口
	onMounted(() => {
	  
	});
	
	const pcData = ref([
		{
			id:"1",
			image:"/static/science1.png",
			title:"水满则溢,小满则宜———调理身体与减重的好时机|绘健康",
			author:"广中医一院",
			date:"2025年05月21日",
		},
		{
			id:"2",
			image:"/static/science2.png",
			title:"小满养生 未病先防,守护家人 小得盈满|悦护理",
			author:"广中医一院",
			date:"2025年05月21日",
		},
		{
			id:"3",
			image:"/static/science2.png",
			title:"小满养生 未病先防,守护家人 小得盈满|悦护理",
			author:"广中医一院",
			date:"2025年05月21日",
		},
	])
</script>

<style lang="scss">
	.sciencePopular-article{
		position: absolute;
		left: 50%;
		width: 700rpx;
	    transform: translateX(-50%);
		.article-box{
			width: 100%;
			height: 140rpx;
			border-radius: 20rpx;
			margin: 10rpx 0;
			background-image: url("/static/background-img.png");
			background-size: cover;
			position: relative;
			.box-img{
				position: absolute;
				top: 19rpx;
				left: 19rpx;
				width: 160rpx;
				height: 102rpx;
				border-radius: 10rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.box-title{
				font-size: 22rpx;
				font-weight: 700;
				color: #7272A1;
				width: 450rpx;
				position: absolute;
				left: 196rpx;
				top: 19rpx;
			}
			.box-author{
				font-size: 17rpx;
				color: #7272A1;
				position: absolute;
				left: 196rpx;
				bottom: 19rpx;
			}
			.box-date{
				font-size: 17rpx;
				color: #7272A1;
				position: absolute;
				right: 19rpx;
				bottom: 19rpx;
			}
		}
	}
</style>